<template>
  <div class="dy-main EAccountApprove">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack: true,backText: ''}" @on-click-back="back" @on-click-more="showMenus = true">身份认证</x-header>
    </div>
    <div class="dy-body">
      <div v-for="(item, index) in photoMes" :key="index" class="IdPhoto" @click="openPup(index)">
        <zx-fileImg v-model="item.image" :img="item.image" :title="item.title" :showShadow="item.shadow">
        </zx-fileImg>
      </div>
      <div v-if="isPicOk">
        <group>
          <x-input title="姓名" :value="returnData.name" :disabled="canWrite" text-align="right">
            <a href="javascript:void(0)" slot="right" @click="canWrite = false">
              <img :src="require('../../../src/assets/img/me.png')" width="20px" height="20px">
            </a>
          </x-input>
          <x-input :title="requestData.IDType" :value="returnData.id" disabled text-align="right"></x-input>
          <x-input title="有效日期" :value="returnData.validity" disabled text-align="right"></x-input>
        </group>
      </div>
      <div class="btn">
          <x-button type="primary" @click.native="toApproveFailed(isPicOk)">{{isPicOk === 0? '下一步' : '确认提交' }}</x-button>
      </div>
    </div>
    <toast v-model="showPositionValue" type="text" width="6rem" :time="800" is-show-mask position="middle">{{errormssg}}</toast>
    <popup v-model="downPop" position="bottom" max-height="50%">
      <ul>
        <li @click="getData('1')">拍摄</li>
        <li @click="getData('2')">从手机相册选择</li>
        <li @click="downPop = false">取消</li>
      </ul>
    </popup>
  </div>
</template>

<script>
export default{
  data () {
    return {
      errormssg: '请拍摄正确的身份证照', // 提示错误信息
      byx: '',
      policeRep: '13', // 后台返回身份证信息核实情况
      showPositionValue: false,
      isPicOk: 0,
      isPicNum: null, // 判断点击拍照位置
      photoReturn: {
        fonts: '',
        after: ''
      },
      photoMes: [
        {title: '身份证正面照', image: require('../../assets/img/upfileimg.png'), shadow: false}, // 身份证正面照
        {title: '身份证背面照', image: require('../../assets/img/upfileimg.png'), shadow: false} // 身份证背面照
      ],
      canWrite: true, // 控制信息disabled
      secondAccount: '开通Ⅱ类账户',
      thridAccount: '开通Ⅲ类账户',
      AccountSearch: 'Ⅱ/Ⅲ类账户查询',
      downPop: false, // 控制底部弹层
      requestData: { // 请求报文
        cardHolder: '王大炮', // 持卡人姓名
        IDType: '身份证', // 证件类型
        IDNo: '30344949494944949494', // 身份证号
        IDtime: '2018-2-28' // 有效期限
      },
      returnData: {
        isFront: 'true', // 正面(true)或者背面(false)
        name: '张三', // 身份证姓名
        firstName: '', // 拼音姓
        lastName: '', // 拼音名
        sex: '', // 性别
        national: '', // 名族
        birthday: '', // 出生日期
        address: '', // 身份证地址
        id: '', // 身份证号码
        issueauthority: '', // 身份证签发机关
        validity: '' // 身份证有效期
      }, // 返回报文
      clickOne: false // 防重点击
    }
  },
  computed: {
  },
  mounted () {
    // this.submitData()
  },
  methods: {
    toApproveFailed: function (arg) {
      if (this.clickOne) return true
      this.clickOne = true
      if (arg === 0) {
        this.setPicture()
      } else {
        this.setToPolice()
      }
      // this.$router.push({name: 'EAccountApproveFailed'})
    },
    setToPolice () {
      // todo 上传身份证照片去公安局验证
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'policeIDNoPhotoCheck', 'basic_Data': JSON.stringify({'cardHolder': this.returnData.name, 'idNo': this.returnData.id, 'frontPhoto': this.photoReturn.fonts, 'backPhoto': '222'})}
        }),
        (response) => {
          // alert('返回' + JSON.stringify(response))
          // this.eaccountData = response.data[0]
          // this.policeRep = response
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            this.$router.push({name: 'EAccountMessageSure', query: {'cardHolder': this.returnData.name, 'idNo': this.returnData.id, 'pinYingXing': this.returnData.firstName, 'pinYingMing': this.returnData.lastName, 'birthday': this.returnData.birthday, 'sex': this.returnData.sex, 'address': this.returnData.address}})
            // todo 将身份证信息上传给后端跳转页面
          } else {
            // this.policeRep = response
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': rep.head.respMsg
            })
          }
          this.clickOne = false
        })
    },
    setPicture () {
      let _this = this
      this.$bridge.callhandler('idCardDataConvert',
        JSON.stringify({
          'photoFront': _this.photoReturn.fonts,
          'photoBack': _this.photoReturn.after
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === 'success') {
            _this.returnData = response.result
            if (_this.photoReturn.fonts !== '' && _this.photoReturn.after !== '') {
              _this.isPicOk = 1
              _this.$store.commit('setPhotoReturn', _this.photoReturn) // 将图片数据存在vuex
            } else {
              _this.showPositionValue = true
              _this.errormssg = '请拍摄完整'
            }
          } else {
            console.log('fail')
            _this.showPositionValue = true
            _this.errormssg = '图片获取失败'
          }
          _this.clickOne = false
        })
    },
    back () {
      this.$publicFun.goBack(this)
    },
    openPup (module) {
      this.isPicOk = 0
      this.isPicNum = module
      this.downPop = true
    },
    getData (module) {
      let _this = this
      this.$bridge.callhandler('takePhoto',
        JSON.stringify({
          'photoType': module
        }),
        function (response) {
          // alert('byx' + response)
          response = JSON.parse(response)
          if (response.status === 0 || response.status === 'success') {
            if (_this.isPicNum === 0) {
              // console.log(_this.photoMes[0].image)
              _this.downPop = false
              _this.photoReturn.fonts = response.pictureData
              _this.photoMes[0].image = 'data:image/png;base64,' + response.pictureData
            } else {
              // todo _this.photoMes[1].image
              _this.downPop = false
              _this.photoReturn.after = response.pictureData
              _this.photoMes[1].image = 'data:image/png;base64,' + response.pictureData
            }
            // this.$router.push({name: 'EAccountApproveFailed', query: {returnData: _this.returnData}})
          } else {
            console.log('fail')
          }
        })
    }
  }
}
</script>

<style lang="less">
  .EAccountApprove{
    .btn{
      padding: .32rem .3rem;
    }
    ul{
      overflow: hidden;
      background: #fff;
      li{
        line-height: 0.99rem;
        border-bottom: 1px solid #eaeaea;
        font-size: .26rem;
        color: #333;
        text-align: center;
      }
    }
    .IdPhoto{
      padding: 0.29rem 0.55rem;
    }
  }
</style>
